import { useImperativeHandle, forwardRef, useRef, useEffect } from "react"


//配合forwardRef来使用
//需求:点击父组件的按钮的时候让父组件的输入框获取焦点
//tongguseRef useImperativeHandle forwardRef

//1.在父组件中创建-ref的引用
//2.创建的ref引用赋值给子组件的ref属性
//3.由于Child组件是一个函数组件,函数组件没有办法传递ref,所以需要使用forward来进行包装
//4.使用useImperativeHandle将子组件的方法或者属性暴露给父组件

type IchildRef = {
    getFocus: (val: string) => any
    msg: string
}

//子组件
let Child = forwardRef<IchildRef, { age: number }>((props, ref) => {
    //在子组件内部再次创建一个ref
    let ipt = useRef<HTMLInputElement | null>(null)
    //暴露子组件的属性或者方法   
    useImperativeHandle(ref, () => {
        return {
            msg: '今夜我又来到你的窗外,窗帘上你的影子是多么可爱',
            getFocus() {
                ipt.current!.focus()
                return 777
            }
        }
    })

    return (
        <fieldset>
            <legend>子组件</legend>
            <input type="text" ref={ipt} />
        </fieldset >
    )
})

//父组件
let UseIperativeHandleCom = () => {

    //父组件创建ref

    let childRef = useRef<IchildRef | null>(null)

    useEffect(() => {
        console.log(childRef);

    })

    return (
        <fieldset>
            <legend>暴露属性的hooks</legend>
            <h1>父组件</h1>
            <button onClick={() => {
                childRef.current!.getFocus('888')
            }} >点击让子组件的input获取焦点</button>
            <Child age={18} ref={childRef} />
        </fieldset>
    )
}

export default UseIperativeHandleCom